<template>
  <div class="setID">
    <div class="title" v-if="suggestsongs">
      <span class="iconfont icon-xiangzuo" @click="JumpToHomePage"></span
      >返回<span class="Songtitle">{{ suggestsongs[0].name }}</span>
    </div>
    <van-tabs v-model="active">
      <van-tab title="单曲">
        <div class="swiper-container swiper-container-01">
          <h2 @click="PlayAll">
            <span class="iconfont icon-24gf-playCircle"></span> 单曲
          </h2>
          <div class="swiper-wrapper">
            <div
              class="swiper-slide item"
              v-for="(item, index) in suggestsongs"
              :key="index"
              @click="setId(item.id)"
            >
              <p>{{ item.name }}</p>
              <p class="songarname">
                {{ item.al.name }}&nbsp;-&nbsp;{{ item.name }}
              </p>
              <span class="iconfont icon-bofang2"></span>
              <span class="iconfont icon-sandian1"></span>
            </div>
          </div>

          <div class="swiper-pagination swiper-pagination-01"></div></div
      ></van-tab>
      <van-tab title="歌单" class="songSheet">
        <div
          v-for="(item, index) in songSheet"
          :key="index"
          class="songSheetdiv"
        >
          <router-link
            :to="'/ranking/rankinglist?id=' + item.id"
            class="imageurl"
            :style="'background-image: url(' + item.coverImgUrl + ')'"
          ></router-link>
          <div>
            <p>{{ item.name }}</p>
            <p>{{ item.description }}</p>
          </div>
        </div>
      </van-tab>
      <van-tab title="视频" class="video">
        <div class="videodiv" v-for="(item, index) in video" :key="index">
          <div
            class="imageurl"
            :style="'background-image: url(' + item.cover + ')'"
          ></div>
          <div>
            <h1>{{ item.name }}</h1>
            <p>{{ item.artistName }}</p>
            <p>{{ item.playCount }}播放</p>
          </div>
        </div>
      </van-tab>
      <van-tab title="歌手" class="singer">
        <div
          v-for="(item, index) in singer"
          :key="index"
          class="singerdiv"
          v-show="index < 6"
        >
          <router-link
            :to="'/recommend/singerID?id=' + item.id"
            class="imageurl"
            :style="'background-image: url(' + item.img1v1Url + ')'"
          ></router-link>
          <div>{{ item.name }}</div>
        </div>
      </van-tab>
      <!-- <van-tab title="专辑" class="Album">
        <div v-for="(item, index) in suggestsongs" :key="index">
          <div
            class="imageurl"
            :style="'background-image: url(' + item.al.picUrl + ')'"
          ></div>
          <div>{{ item.al.name }}--{{ item.name }}</div>
        </div>
      </van-tab> -->
      <!-- <van-tab title="歌词" class="lyric">
        <div v-for="(item, index) in suggestsongs" :key="index">
          <div
            class="imageurl"
            :style="'background-image: url(' + item.al.picUrl + ')'"
          ></div>
          <div>{{ item.al.name }}--{{ item.name }}</div>
        </div>
      </van-tab> -->
      <!-- <van-tab title="用户" class="user">
        <div v-for="(item, index) in suggestsongs" :key="index">
          <div
            class="imageurl"
            :style="'background-image: url(' + item.al.picUrl + ')'"
          ></div>
          <div>{{ item.al.name }}--{{ item.name }}</div>
        </div>
      </van-tab> -->
    </van-tabs>
  </div>
</template>
<script>
import { getSearchSuggest, getArtistSub } from "../../api/recommend";
export default {
  data() {
    return {
      suggestsongs: null,
      active: 0,
      single: null,
      songSheet: null,
      video: null,
      singer: null,
      singershow: true,
      Album: null,
      lyric: null,
      user: null,
    };
  },
  methods: {
    JumpToHomePage() {
      this.$router.go("-1");
    },
    setId(id) {
      this.$emit("get-player-id", id);
    },
    PlayAll() {
      this.$emit("get-player-id", this.suggestsongs[0].id);
    },
    judge() {
      this.singershow = !this.singershow;
    },
    clickSinger(id) {
      this.$router.push({ name: "recommend/singerID", id: id });
    },
    getArtistSubFUN() {
      getArtistSub().then((data) => {
        console.log(data);
      });
    },
  },
  created() {
    // 单曲
    getSearchSuggest({ keywords: this.$route.query.name, type: 1 }).then(
      (data) => {
        this.suggestsongs = data.result.songs;
      }
    );
    // 歌单
    getSearchSuggest({ keywords: this.$route.query.name, type: 1000 }).then(
      (data) => {
        this.songSheet = data.result.playlists;
      }
    );
    // 视频
    getSearchSuggest({ keywords: this.$route.query.name, type: 1004 }).then(
      (data) => {
        this.video = data.result.mvs;
      }
    );
    // 歌手
    getSearchSuggest({ keywords: this.$route.query.name, type: 100 }).then(
      (data) => {
        this.singer = data.result.artists;
      }
    );
    // //专辑
    // getSearchSuggest({ keywords: this.$route.query.name, type: 10 }).then(
    //   (data) => {
    //     // this.songSheet = data.result.songs;
    //     console.log(data);
    //   }
    // );
    // // 歌词
    // getSearchSuggest({ keywords: this.$route.query.name, type: 1006 }).then(
    //   (data) => {
    //     // this.songSheet = data.result.songs;
    //     console.log(data);
    //   }
    // );
    // // 用户
    // getSearchSuggest({ keywords: this.$route.query.name, type: 1002 }).then(
    //   (data) => {
    //     // this.songSheet = data.result.songs;
    //     console.log(data);
    //   }
    // );
  },
};
</script>
<style lang="less">
.setID {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  .title {
    height: 60px;
    line-height: 60px;
    text-indent: 5px;
    font-size: 16px;
    color: #000;
    font-weight: bold;
    border-bottom: 1px solid #cfcfcf;
    .Songtitle {
      position: absolute;
      padding: 0 20px;
      left: 30%;
      width: 30%;
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      border: none;
      border-radius: 10px;
    }
  }
  .van-tabs {
    .songSheet {
      .songSheetdiv {
        width: 95%;
        display: flex;
        align-items: center;
        margin: 10px auto;
        div {
          width: 80%;
          p {
            font-size: 14px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding-bottom: 2px;
            &:last-child {
              font-size: 8px;
              color: #ccc;
            }
          }
        }
        .imageurl {
          width: 15%;
          height: 60px;
          background-size: 100%;
          background-repeat: no-repeat;
          margin-right: 5px;
          border-radius: 10px;
        }
      }
    }
    .video {
      width: 95%;
      margin: 10px auto;
      .videodiv {
        display: flex;
        align-items: center;
        margin: 10px 0;
        .imageurl {
          width: 35%;
          height: 10vh;
          border-radius: 10px;
          background-size: 100%;
          margin-right: 2%;
          background-repeat: no-repeat;
        }
        div {
          width: 50%;
          h1 {
            font-size: 14px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          p {
            font-size: 12px;
            margin: 2% 0;
            color: #ccc;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
    .singer {
      .singerdiv {
        display: flex;
        align-items: center;
        div {
          height: 10vh;
          line-height: 10vh;
          &:nth-child(2) {
            flex: 1;
          }
        }
        a.imageurl {
          width: 60px;
          height: 60px;
          margin: 0 10px;
          border-radius: 50%;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
        div.follow {
          width: 20%;
          position: relative;
          span {
            font-size: 14px;
            position: absolute;
            &:nth-child(1) {
              color: red;
            }
          }
        }
      }
    }
  }
  .PlayAll {
    width: 100%;
    background-color: #fd403b;
    p {
      color: #fff;
      font-size: 20px;
      font-weight: bold;
      width: 90%;
      margin: 10% auto 5% auto;
      padding: 0 5px;
    }
  }
  .swiper-container {
    width: 95%;
    margin: 0 auto;
    h2 {
      height: 30px;
      line-height: 30px;
      font-size: 18px;
      margin: 3% 0;
      font-weight: 500;
      span {
        color: rgb(248, 31, 31);
        font-size: 25px;
      }
    }
    .swiper-slide {
      position: relative;
      margin: 5% 0;
      p {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding-right: 20%;
        font-size: 14px;
      }
      .songarname {
        font-size: 12px;
        color: #909090;
      }
      span {
        color: #909090;
        position: absolute;
        top: 8px;
        right: 7%;
        font-size: 20px;
        &:last-child {
          top: 0;
          right: 0;
          font-size: 35px;
        }
      }
    }
  }
}
</style>